<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!--引入react的核心库-->
<script src="../script/react.development.js"></script>
<!--引入react的DOM库-->
<script src="../script/react-dom.development.js"></script>

<body>
    <div id="root"></div>
    <div id="origin_buttom"></div>
</body>
<script>
    // 1. 创建的 React DOM 元素是一个React js生成的DOM
    const button = React.createElement('button', {}, 'react 生成的DOM元素');
    const o_button = document.getElementById('origin_buttom')
    console.log(button);
    console.log(o_button);
    // 可以看到输出的内容是不一样的 button 输出的是一个 typeof:Symbol(react.element) 内容

    /** 2. 生成React Dom 元素的的操作是一个核心库的js的操作，
     *  所以使用的是React核心库的内容
     *  当真正操作DOM 元素的时候 使用的才是 react-dom.development.js的内容
     * */

    /** 3. React.createElement()
     *      - 用来创建一个React元素
     *      - 参数：
     *          1. 元素的名称
     *          2. 标签的属性
     *              - class属性需要使用className来设置
     *              - 设置元素事件的时候，属性名需要修改为驼峰命名法
     *          3. 元素的内容（子元素）
     *      - 注意点：
     *          React 元素最终会通过虚拟DOM 转化为真实的DOM 元素
     *          React 元素一旦创建就无法修改，只能通过新创建的元素进行替换
     *      
    */
    const button1 = React.createElement('button', {
        type: 'button',
        className: 'react',
        onClick: () => {
            renderReactDom('已创建')
        }
    }, '创建')
    /** 4. 获取根元素
     * 18版本之前使用的是 ReactDOM.render(div, document.getElementById('root'));
    */
    const root = ReactDOM.createRoot(document.getElementById('root'))
    
    // 5. 将元素在根元素中渲染
    /*
    *   root.render()
    *       - 用来将React元素渲染到根元素中
    *       - 根元素中所有的内容都会被删除，被React元素所替换
    *       - 当重复调用render()时，React会将两次的渲染结果进行比较，
    *           它会确保只修改那些发生变化的元素，对DOM做最少的修改
    *
    * */
    root.render(button1)

    /** 6. 虚拟dom渲染
     * 当我们进行render 渲染的时候并不是真正的对DOM元素进行操作
     * 操作的是React 创建的元素
     * 虚拟DOM进行对比，只在真实DOM中更新发生变化的部分，具体到每一个部分，文字变化就只变化文字，html5标签都不变
    */

</script>

</html>